<template>
  <div class="person">
    <h2>我是Person组件</h2>
    <h4>姓名：{{name}}</h4>
    <h4>年龄：{{age}}</h4>
    <h4>座驾：{{car}}</h4>
    <button @click="changeName">修改名字</button>
    <button @click="changeAge">修改年龄</button>
    <button @click="changeCarColor">修改座驾颜色</button>
    <button @click="changeCar">修改座驾</button>
    <h1>{{a}}</h1>
  </div>
</template>

<script>
  export default {
    name:'Person',
    data() {
      return {
        a:1
      }
    },
    props:['car','name','age','a'],
    methods: {
      changeName(){
        this.name = 'lao-duan'
      },
      changeAge(){
        this.age += 1
      },
      changeCarColor(){
        this.car.color = '紫色'
      },
      changeCar(){
        this.car = {color:'蓝色',price:'10万'}
      }
    },
  }
</script>

<style scoped>
  .person {
    background-color: skyblue;
    padding: 10px;
  }
</style>